<template>
  <div :class="[widthClass ? 'narrow' : 'wider', 'menu-list']">
    <el-menu class="el-menu-vertical-demo"
             :collapse="$store.state.collapsed"
             :defaultActive="defaultActive"
             uniqueOpened
             collapseTransition
             backgroundColor="#545c64"
             textColor="#fff"
             activeTextColor="#ffd04b">
      <!-- 普通用户 -->
      <!-- <template v-if="$store.state.user.role == 2"> -->
      <template v-if="true">
        <template v-for="route in menuRoutes">
          <el-menu-item :key="route.name"
                        :index="route.name"
                        @click="toPath(route.name)">
            <i :class="route.meta.icon" />
            <span slot="title"
                  style="font-size: 16px; margin-right: 20px">
              {{ route.meta.title }}
            </span>
          </el-menu-item>
        </template>
      </template>
      <!-- 管理员 -->
      <template v-else />
    </el-menu>
  </div>
</template>

<script>
export default {
  computed: {
    defaultActive () {
      return this.$route.name
    }
  },
  mounted () {
    this.menuRoutes = JSON.parse(localStorage.getItem('menuRoutes'))
  },
  props: {
    widthClass: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      isCollapse: false,
      menuRoutes: []
    }
  },
  methods: {
    toPath (name) {
      this.$router.push({ name })
    }
  }
}
</script>

<style lang="less" scoped>
@import '../assets/css/index.less';

.home {
  .menu-list {
    position: fixed;
    z-index: 99;
    height: 100%;
  }
  .wider {
    width: 289px;
  }
  .narrow {
    width: 64px;
  }
  .el-menu-vertical-demo {
    overflow: auto;
    height: 100%;
    &::-webkit-scrollbar {
      display: none;
    }
  }
}
</style>
